<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
	<style>
		:root {
			--c-bg: #fff;
		}

		html.dark {
			--c-bg: #1d1d1d;
		}

		html, body {
			background-color: var(--c-bg);
		}
	</style>
	<script>
		(() => {
			const { classList } = document.documentElement;
			const userMode = localStorage.getItem('guide-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				classList.toggle('dark', true);
			}

			const themes = ['blurple'];
			let colorTheme = localStorage.getItem('guide-color-theme');

			if (colorTheme !== 'default' && !themes.includes(colorTheme)) {
				colorTheme = 'default';
			}

			if (colorTheme !== 'default') classList.add(`guide-theme-${colorTheme}`);
		})();
	</script>
<!--vuepress-ssr-head-->
<!--vuepress-ssr-resources-->
<!--vuepress-ssr-styles-->
</head>
<body>
	<div id="app"><!--vuepress-ssr-app--></div>
	<!--vuepress-ssr-scripts-->
</body>
</html>
